<!--
 * @Description: 订单管理页面
 * @Author: Fengqin
 * @Date: 2021-06-24 21:13:04
 * @LastEditors: Morgan
 * @LastEditTime: 2021-07-02 21:00:44
-->
<template>
  <!-- 订单管理页 -->
  <div class="main">
    <!-- 导航栏 -->
    <!-- {{activeName}} -->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有订单" name="所有订单" />
      <el-tab-pane label="待支付" name="待支付" />
      <el-tab-pane label="待派单" name="待派单" />
      <el-tab-pane label="待接单" name="待接单" />
      <el-tab-pane label="待服务" name="待服务" />
      <el-tab-pane label="待确认" name="待确认" />
      <el-tab-pane label="已完成" name="已完成" />
    </el-tabs>
    <!-- 表格展示数据 -->
    <div>
      <el-table
        :data="tableData"
        style="width: 100%"
        stripe
        :default-sort="{ prop: 'id', order: 'descending' }"
      >
        <el-table-column prop="id" label="订单编号" width="150" sortable />
        <el-table-column
          prop="orderTime"
          label="下单日期"
          sortable
          :formatter="formatter"
          value-format="timestamp"
        />
        <el-table-column prop="total" label="总价" sortable>
          <template slot-scope="scope">
            <span><svg
                    t="1624619356606"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="4427"
                    width="20"
                    height="18"
                  >
                    <path
                      d="M841.5 631.1c-43.2-115.2-162.5-240.7-187.8-265l-0.9-0.9c-3-2.7-6.2-5.5-9.8-8.4-2.7-2.9-5.2-5.4-7.5-7.8 7.7 6.4 17.5 10.4 28.4 10.4 17.4 0 32.3-10.1 39.7-24.6 25.9 5.2 93.8 20 102.7 57.2 2.1 8.8 10 14.7 18.7 14.7 1.5 0 3-0.2 4.5-0.5 10.3-2.5 16.7-12.8 14.2-23.2-11.2-46.5-62.6-68-101.7-78.7 18.5-17.3 35.1-39.3 37-54.6 1.3-10.2-5.8-19-16-20.7-10.2-1.7-20 5.6-22.1 15.7-2.1 10-26.2 34.6-40.3 44.7-8.1-11.6-21.5-19.3-36.7-19.3-13.4 0-25.3 6-33.5 15.4 4.7-7 9.7-11.8 12.2-14 1.8-1.6 5.2-4.2 9.6-7.7 48.8-38.4 95.3-70.6 104.9-100.3 2.7-8.2 4.5-13.5 5.8-17 1.9-5.4 7.5-21.2-6.9-28.5-2.9-3.1-8.1-6.8-16.4-6.8-6.5 0-13 2.2-21.3 5-13.8 4.7-33 10-45.4 4.8-10.4-4.4-20.4-11.5-30.9-19-19.6-13.9-41.8-29.8-72.9-32-24.7-1.8-44.8 6.6-64 14.7-17.1 7.2-33.2 14-54.9 14h-0.1c-21.1-0.4-44.1-3.5-64.4-6.2-19.1-2.6-35.6-4.8-48.9-4.8-5.6 0-10.3 0.4-13.4 1.1-2-1.6-5.1-5.4-9.1-11.3-3.1-4.6-7.9-11.6-17.7-11.6-5.5 0-10.9 2.7-14.2 7.1-5.8 7.7-5.5 9 4.2 43.2l1.4 4.9c0.3 1.1 0.6 3.1 1.1 5.8 3.4 19.2 11.5 56.8 33 80.2 3 3.8 6.3 7.9 9.9 12.3 16.5 20.3 37.7 46.5 48.3 74.5-5.2 1.1-10.4 1.9-15.6 3.1-9.5 2.1-15.5 11.6-13.4 21.1 2.1 9.5 11.6 15.4 21.1 13.3 4.8-1.1 9.6-1.9 14.4-2.8-0.3 9.2-2.3 18.5-6.6 27.6-2.7 3.9-5.4 7-8 9.2-89.3 75.6-152.9 170-188.8 265.9-35.6 94.9-38.1 133.8-37.6 165.4 0.7 43.3 2.5 158.2 207.3 161.2 182.7 2.7 205.9 2 319.5 0.7 204.5-2.2 206.2-118.3 206.9-162 0.1-31.8-2.4-70.7-38-165.5zM359.1 204.4c-3.4-4.2-6.6-8.2-10.4-12.9-14.3-15.6-21.4-50.4-24.5-67.3 1.4-0.1 2.9-0.3 4.3-0.6 1.3-0.3 3.7-0.6 8-0.6 11 0 27.1 2.2 44.2 4.5 21.2 2.8 45.3 6.1 68.4 6.5h2.5c27.1 0 48.3-8.9 67-16.8 16.9-7.1 31.1-13.2 47.7-12 21.2 1.5 37.6 13.2 55 25.5 11.6 8.3 23.6 16.8 37.6 22.7 20.2 8.6 47 3.9 64.8-1.9-0.1 0.3-0.2 0.7-0.3 1-5.1 15.7-36.4 38.8-93.1 83.5-4.9 3.9-8.6 6.8-10.6 8.5-5.9 5-20.3 16-28.7 37.3-51.7-8.1-112.2-7.2-175.7 2.6-12.1-36-37.7-57.2-56.2-80z m267.6 135.2c-3.1-3.8-5-7.3-5.9-12.3 0.1 0 0.2 0.1 0.4 0.1 1.2 4.4 3 8.5 5.5 12.2z m217.1 456.3c-0.7 43.8-1.9 122.2-172 124.1-99.8 1.1-112.5 2.4-318.6-0.7-170.6-2.5-171.9-80-172.5-123.4-0.4-28.3 1.9-63.4 35.4-152.5C249.9 553.2 310 463.7 394.7 392c5.2-4.4 10.3-10.2 15.1-17.3 0.4-0.6 0.8-1.3 1.2-2 8.6-17.2 11.7-34.2 11-50.6 58.9-8.9 115.4-9.8 162.9-2.5 0 1.4-0.2 2.6-0.1 4 1.7 26.4 12.7 37.3 24.3 48.8 2.7 2.7 5.6 5.6 8.8 9 0.6 0.6 1.2 1.2 1.8 1.7 3.6 3 6.9 5.8 9.5 8.2 14 13.3 137.8 141 179.4 252.1 33.3 89.2 35.6 124.2 35.2 152.5zM520.9 627.3v-98.2c22.3 4.6 42.4 15.1 58.6 32.9l22.4-27.3c-20.5-21.3-47.3-35.6-81-40v-41.9h-19.5v0.4h-17.1v39.9c-53.8 4-91.2 36.8-91.2 82.9 0 55.1 45.5 70.4 91.2 82.9v108.9c-35.4-4-61.2-22-78.2-42.1l-22.4 28.7c22.4 25.5 55.4 44.4 100.6 47.1v40.2h29.5v-0.3h7.1v-41c63.8-7.4 87.8-47.5 87.8-86.4 0-55.7-43.8-73.8-87.8-86.7z m-36.6-9.2c-30.5-9-52.7-19.7-52.7-44.4 0-26 20.9-44.8 52.7-47.1v91.5zM520.9 767v-98.6c28 9.1 49.2 21.5 49.2 48.4 0.1 20.1-12.3 43.7-49.2 50.2z"
                      p-id="4428"
                      fill="#d81e06"
                    />
                  </svg>
              <font color="red" font-size="12">{{ scope.row.total }}</font>元</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="200">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status === '待派单'
                  ? 'success'
                  : scope.row.status === '待服务'
                    ? 'info'
                    : scope.row.status === '已完成'
                      ? 'warning'
                      : 'danger'
              "
            >{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="customerId" label="顾客ID" width="150" />
        <el-table-column
          v-if="activeName !== '待支付' && activeName !== '待派单'"
          prop="employeeId"
          label="员工ID"
          width="150"
        />
        <el-table-column label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="text" class="blue_info" @click="toSee(scope.row.id)">详情</el-button>
            <el-button
              type="text"
              :disabled="scope.row.status !== '待派单'"
              @click="showModal(scope.row.id)"
            >派单</el-button>
            <el-button
              type="text"
              :disabled="scope.row.status !== '待接单'"
              class="red_info"
              @click="closeSend(scope.row.id)"
            >取消派单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div class="pagination-div">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalpage"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 派单模态框 -->
    <el-dialog title="派单" :visible.sync="visible">
      <div>
        <!-- {{ form }} -->
        <el-radio-group v-model="form.waiterId">
          <el-radio
            v-for="item in roleName"
            :key="item.id"
            border
            :label="item.id"
          >
            {{ item.username }}{{ item.realname }}
          </el-radio>
        </el-radio-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="toSubmit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { cancelSendOrder, pageQuery, sendOrder } from '@/api/order'
import { pageQuery as pageQueryPro } from '@/api/user'
import moment from 'moment'
export default {
  data() {
    return {
      tableData: [],
      totalpage: 0,
      params: {
        page: 1,
        pageSize: 10
      },
      // 标签页的激活状态，设置第一个
      activeName: '所有订单',
      visible: false,
      roleName: [],
      form: {
        waiterId: '',
        orderId: ''
      }
    }
  },
  computed: {},
  watch: {
    params: {
      handler() {
        this.handleClick()
      },
      deep: true
    }
  },
  created() {
    this.handleClick()
  },
  mounted() {},
  methods: {
    // 时间格式化
    formatter(row, column) {
      var date = row[column.property]
      if (date == undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    },
    // 每页显示的条数发生变化时的处理程序
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.params = {
        pageSize: val,
        page: 1
      }
    },
    // 当前页码发生变化时的事件处理程序
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.params.page = val
    },

    async handleClick() {
      const temp = {
        ...this.params
      }
      if (this.activeName !== '所有订单') {
        temp.status = this.activeName
      }
      const res = await pageQuery(temp)
      // let res = await pageQuery(this.params)
      this.tableData = res.data.list
      this.totalpage = res.data.total
    },
    toSee(id) {
      // 跳转页面
      // this.index = scope.row.id
      this.$router.push({
        path: '/admin/order/Details',
        query: { id: id }
      })
    },
    async showModal(id) {
      this.form.orderId = id
      // this.form.waiterId = roleName.id
      this.visible = true
      const ro = {
        ...this.params,
        roleId: 1
      }
      const res = await pageQueryPro(ro)
      this.roleName = res.data.list
    },
    toSubmit({ form }) {
      const temp = {
        ...this.form
      }

      // this.form.waiterId = res.data.list.id

      this.$confirm('是否进行派单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await sendOrder(temp)
          this.visible = false
          this.handleClick()
          this.$message({
            type: 'success',
            message: '派单成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消派单'
          })
        })
    },
    // 取消派单
    closeSend(id) {
      const temp = {
        orderId: id
      }
      this.$confirm('是否取消派单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          const res = await cancelSendOrder(temp)
          this.handleClick()
          this.$message({
            type: 'success',
            message: '取消派单成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消派单失败'
          })
        })
    }
  }
}
</script>
<style scoped>
</style>
